<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/jquery.qrcode.min.js"></script>
<title>debitCard</title>
</head>
<script type="text/javascript">

	$(function(){
		close();
		
		
		$("#submitBtn").on("click",function(){
			saveDebitCard();
		});
		$("#colseBtn").on("click",function(){
			close();
		});
	})

	function del(){
		var checked = $("input:checkbox");
		//alert(checked.length)
		
		var ids = new Array();
		$(checked).each(function() {
			
			
			if ($(this).prop("checked") == true) //注意：此处判断不能用$(this).attr("checked")==‘true'来判断。 
			{
				var id_ = $.trim($(this).val());
				$(this).parent().parent().remove();
				
				ids.push(id_);
				
			}
		});
		
		alert(ids.length);
		$.ajax({
			type:"POST",
			data:"ids="+ids, //data:{"ids":ids}
			url:"<%=basePath%>user/deleteDebitCard",
			success:function(result){
				if(result.success){
					alert("删除成功!")
				}else {
					alert("删除失败!")
				}
			},
			error:function(result){
				alet("error");
			}
			
		});
		
	}
	
	//新增
	function addNew(){
		$("#myModal").show();
	}
	
	//保存
	function saveDebitCard(){
		var cardNo_ = $.trim($("#cardNo").val());
		
		var cardName_ = $.trim($("#cardName").val());
		
		var bankName_ = $.trim($("#bankName").val());
		
		var remark_ = $.trim($("#remark").val());
		
		alert(bankName_);
		
		$.ajax({
			type:"POST",
			data:{"cardNo":cardNo_,"cardName":cardName_,"bankName":bankName_,"remark":remark_},
			url:"<%=basePath%>user/createDebitCard",
			success:function(result){
				if(result.success){
					alert("添加成功!")
					
				close();
					
					window.location.reload();//刷新当前页面
					
				}else {
					alert("添加失败!")
				}
			},
			error:function(result){
				alet("error");
			}
		})
		
		
		
	}
	

	
	//关闭
	function close(){
		$("#myModal").hide();
	}
	
</script>

<script type="text/javascript" language="javascript">
	
</script>

<body>

<!-- 	<table id="vtable" border="1">
		<thead>
			<tr>
				<th>标题</th>
				<th>haha</th>
				<th>标题</th>
				<th>haha</th>
			</tr>
		</thead>
		<tbody id="tbody"></tbody>
	</table> -->

	<input type="button" value="Add" onclick="addNew();">
	<input type="button" value="Delete" onclick="del();">
	<div id="rightcontent">
		<table id="table1" cellspacing="0" cellpadding="3" border="1">
		
		<thead>
				<tr>
					<th></th>
					<th>卡号</th>
					<th>卡片名称</th>
					<th>发卡银行</th>
					<th>状态</th>
					<th>备注</th>
				</tr>
		</thead>
			<tbody>
				<c:choose>
					<c:when test="${not empty cardList}">
						<c:forEach items="${cardList}" var="var" varStatus="vs">
							<tr>
								<td class='center' style="width: 30px;">
								<input type='checkbox' name='ids' value="${var.id}" /><span class="lbl"></span>
								</td>
								<%-- <td class='center' style="width: 30px;">${vs.count}</td> --%>
										<td>${var.cardNo}</td>
										<td>${var.cardName}</td>
										<td>${var.bankName}</td>
										<td>${var.status}</td>
										<td>${var.remark}</td>
							</tr>
						
						</c:forEach>
					</c:when>
					<c:otherwise>
						<tr class="main_info">
							<td colspan="100" class="center" >没有相关数据</td>
						</tr>
					</c:otherwise>
				</c:choose>
			</tbody>
		</table>
	</div>
	
	
	<div  id="myModal" >
	
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">新增银行卡</h4>
					</div>
					<div class="modal-body">
						<form id="userform" class="form-horizontal" role="form">
							<!-- 隐藏ID -->
						<!-- 	<div class="form-group" style="display:none" >
								<label for="id" class="col-sm-2 control-label">ID</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="id" name="id" placeholder="">
								</div>
							</div> -->
						
							<div class="form-group">
								<label for="cardNo" class="col-sm-2 control-label">卡号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="cardNo" name="cardNo" placeholder="请输入卡号">
								</div>
							</div>
							<div class="form-group">
								<label for="cardName" class="col-sm-2 control-label">卡片名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="cardName" name="cardName" placeholder="请输入卡片名称">
								</div>
							</div>

							<div class="form-group">
								<label for="bankName" class="col-sm-2 control-label">发卡银行</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="bankName" name="bankName" placeholder="请输入发卡银行">
								</div>
							</div>

							<div class="form-group">
								<label for="remark" class="col-sm-2 control-label">备注</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="remark" name="remark" placeholder="请输入备注">
								</div>
							</div>

							<div class="modal-footer">
								<!-- data-dismiss="modal" 关闭模态框 -->
								<button id="submitBtn" type="button"  class="btn btn-primary" >提交</button>
								<button id="colseBtn" type="button" class="btn btn-default"  >关闭</button>
							</div>
						</form>
					</div>
				</div>
	
	
</body>
</html>